<template>
    <el-row>
        <el-col :span="8">
            <el-card class="box-card">
                <div class="user">
                    <img src="../assets/image/001.jpeg" alt="" />
                    <div class="userinfo">
                        <p class="name">管理员</p>
                        <p class="access">超级管理员</p>
                    </div>

                </div>
                <div class="logininfo">
                    <p>上次登录时间：<span>18:00:00</span></p>
                    <p>上次登陆地点：<span>2017/12/03</span></p>
                </div>
            </el-card>
            <el-table
            :data="tableData"
            style="width: 100%">
            <!--<el-table-column
                prop="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="todayBuy"
                label="当天购买">
            </el-table-column>
            <el-table-column
                prop="mouthBuy"
                label="当月购买">
            </el-table-column>
            <el-table-column
                prop="totalBuy"
                label="总购买">
            </el-table-column>-->
            <el-table-column v-for = "(val,key) in tableLable" :prop="key" :label="val" />
            

            </el-table>
        </el-col>
        <el-col :span="16">
        
        </el-col>
    </el-row>
</template>
<script>
export default {
    data(){
        return {
            tableData:[
                {
                    name:'vivo',
                    todayBuy:300,
                    mouthBuy:800,
                    totalBuy:1200,
                },
                {
                    name:'vivo',
                    todayBuy:300,
                    mouthBuy:800,
                    totalBuy:1200,
                },
                {
                    name:'vivo',
                    todayBuy:300,
                    mouthBuy:800,
                    totalBuy:1200,
                },
                {
                    name:'vivo',
                    todayBuy:300,
                    mouthBuy:800,
                    totalBuy:1200,
                },
                {
                    name:'vivo',
                    todayBuy:300,
                    mouthBuy:800,
                    totalBuy:1200,
                },
                {
                    name:'vivo',
                    todayBuy:300,
                    mouthBuy:800,
                    totalBuy:1200,
                },
            ],
            tableLable:{
                name:'名称',
                todayBuy:'当日购买',
                mouthBuy:'当月购买',
                totalBuy:'总购买'
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .user{
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        img{
            margin-right: 40px;
            height: 150px;
            width: 150px;
            border-radius: 50%;
        }
        .userinfo{
            .name{
                font-size: 32px;
                margin-bottom: 10px;
            }
            .access{
                color: #999999;
            }
        }

    }
    .logininfo{
        p{
            line-height: 28px;
            font-size:  14px;
            color:#999999;
            span{
                color:#666666;
                margin-left: 60px;
            }

        }
    }

</style>